<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>getElementBy</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			height:110px;
			width:110px;
			border:2px solid #ccc;
			background:yellow;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
		var oBtn = document.getElementById('button');
		var oBtn1 = document.getElementById('button1');
		var Idwrap = document.getElementById('wrap');
		var Idbox = document.getElementById('box');
		var Idpan = document.getElementById('pan');
		
		var g = document.getElementsByName('grounp');
		
		var oDiv = document.getElementsByTagName('div');
		
			Idwrap.onclick = abc;   
			Idbox.onclick = def;
			Idpan.onclick = function(){
				Idpan.style.background = 'red';
			};
			oBtn.onclick = function(){
				alert( g.length );
			};
			function abc(){
				Idwrap.style.background = 'red';
			};
			function def(){
				Idbox.style.background = 'red';
			};
			oBtn1.onclick = function(){
				alert( oDiv[0].innerHTML );
				oDiv[1].innerHTML = '这是通过TagName来改变的'
			};
		};
	</script>
</head>
<body>
	<button id="button" >Name</button>
	<button id="button1" >TagName</button>
	<div name="grounp" id="wrap"> 123 </div>
	<div name="grounp" id="box"> 456 </div>
	<div name="grounp" id="pan"> 789 </div>
	<span style="font-size:20px;">这个比较了getElementBy系列的属性</span>
	<br/>
	<span style="font-size:20px;">document.getElementById只能访问设置了ID
	的元素，并且ID 具有唯一性。可以用来设置元素的样式风格。</span>
	<br/>
	<span style="font-size:20px;">document.getElementsByName会获取文档流中
	Name相同的标签并将这些标签组成数组。不可以用来设置元素的样式风格。</span>
	<br/>
	<span style="font-size:20px;">document.getElementsByTagName会获取文档流中
	的相同标签并组成数组。不可以用来设置元素的样式风格。</span>
	<br/>
</body>
</html>